<template>
    <div>
        <el-dialog :title="state.dialog.title" v-model="state.dialog.visible" width="900px" append-to-body>
            <el-form ref="productFormRef" :model="form" :rules="rules" label-width="100px">
                        <el-form-item label="产品名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入产品名称" />
                        </el-form-item>
                <el-form-item label="类型" prop="workType">
                  <el-select v-model="form.workType">
                    <el-option v-for="item in work_type" :key="item.value" :value="item.value"
                               :label="item.label"/>
                  </el-select>
                </el-form-item>
              <el-form-item label="产品负责人" prop="directorUid">
                <el-select v-model="form.directorUid">
                  <el-option v-for="dict in state.userList"
                             :key="dict.userId"
                             :label="dict.nickName"
                             :value="dict.userId" />
                </el-select>
              </el-form-item>

                        <el-form-item label="评审人" prop="checkAdminIds">
                          <el-select v-model="form.checkAdminIds" >
                            <el-option v-for="dict in state.userList"
                                       :key="dict.userId"
                                       :label="dict.nickName"
                                       :value="dict.userId" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="是否公开" prop="isOpen">
                          <el-radio-group v-model="form.isOpen">
                            <el-radio  key="0" label="0"  size="large" border>私有</el-radio>
                            <el-radio   key="1"  label="1" size="large" border>公开</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="产品描述">
                          <el-input type="textarea" v-model="form.content" rows="3" maxlength="200" show-word-limit/>
                        </el-form-item>
                        <el-form-item label="markdown产品描述">
                          <mdEdit ref="editor" v-model="form.mdContent" mode="edit" />
                        </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="state.buttonLoading" :disabled ="state.buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="ProductAdd" lang="ts">
    import {nextTick, reactive, ref, toRefs} from "vue";
    import { ElForm, ElMessage} from "element-plus";
    import { getProduct, addProduct, updateProduct } from '@/leadmall/api/product';
    import { ProductVO, ProductForm } from '@/leadmall/api/product/types';
    import mdEdit from "@/components/mdEedit/index.vue";
    import { useUser } from "@/api/system/user";
    import {useDict} from "@/utils/dict";
    const { work_type } = useDict("work_type");
    const productFormRef = ref(ElForm as any);
    const state = reactive({
        form: {} as any,
        rules:{},
        buttonLoading:false,
        dialog:{
            visible: false,
            title: ''
        },
      userList:[] as any,
    });
    const {form ,rules} = toRefs(state);
    const emit = defineEmits(["refresh"]);
    /** 表单重置 */
    const reset = () => {
        form.value = Object.assign({},initFormData);
            productFormRef.value = {};
    }

    const initDialog = (type: string,row?: ProductVO) => {
        useUser().getUserList({}).then((res: any) => {
          state.userList = res.data;
        });
        if(type==="add"){
            state.dialog.title = "添加服务";
            nextTick(() => {
                reset();
            });
        }else{
            state.dialog.title = "修改【请填写功能名称】";
            nextTick(async () => {
                reset();
                const _id = row?.id as number;
                const res = await getProduct(_id);
                Object.assign(form.value, res.data);
              // state.userList = await useUser().getUserList({});
            });
        }
    };
    const openDialog = async (type: string, row: ProductVO) => {
        initDialog(type, row);
        state.dialog.visible = true;
    };
    defineExpose({
        openDialog
    });
    const cancel = () => {
        state.dialog.visible = false;
        emit("refresh"); /* 刷新表格 */
    }
    /** 提交按钮 */
    const submitForm = () => {
        state.buttonLoading = true;
            productFormRef.value.validate(async (valid: boolean) => {
            if (valid) {
                let res;
                let message;
                if (form.value.id) {
                    res = await updateProduct(form.value)
                    message = "修改成功"
                } else {
                    res = await addProduct(form.value)
                    message = "新增成功";
                }
                if (res.code === 200) {
                    ElMessage.success(message);
                    cancel();
                }else{
                    ElMessage.error(res.msg);
                }
            }
        });
        state.buttonLoading = false
    }
    const initFormData: ProductForm = {
                        id: undefined,
                        name: undefined,
                        adminId: undefined,
                        directorUid: undefined,
                        workType:undefined,
                        checkAdminIds: undefined,
                        isOpen: "0",
                        status: 1,
                        content: undefined,
                        mdContent: undefined,
                        deleteTime: undefined
    }
</script>
